<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('修改素材')" />
	<th:block th:include="include :: bootstrap-fileinput-css" />
</head>
<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<form class="form-horizontal m" id="form-material-edit"     th:object="${material}">
		   <input  type="hidden" id="materialId" name="materialId"  th:field="*{materialId}">
           <input  type="hidden" id="extension"  name="extension"   th:field="*{extension}">
			 <div class="form-group">
	            <label class="col-sm-3 control-label">素材名称：</label>
	            <div class="col-sm-8">
	                <div class="input-group">
            	      <input class="form-control" type="text" id="materialName" name="materialName" th:field="*{materialName}"  required>
            	      <span class="input-group-btn">  
	                    <input class="file-upload" id="file-upload" name="file" type="file" >
	                  </span>
	                </div>  
	            </div>
	         </div>
            
             <div class="form-group" style="margin-top: -15px;">
	            <label class="col-sm-3 control-label">素材类型：</label>
	            <div class="col-sm-8">
	                <input type="hidden"  id="materialType" name="materialType" th:value="*{materialType}">
	                <div class="radio-box" th:each="dict : ${@dict.getType('shop_material_type')}">
	                    <input type="radio" th:id="${'materialType_' + dict.dictCode}" th:readonly="readonly" name="materialTypeDisplay" th:value="${dict.dictValue}"  >
	                    <label th:for="${'materialType_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
	                </div>
	            </div>
	        </div>
            
            <div class="form-group">
	            <label class="col-sm-3 control-label">选择分组：</label>
	            <div class="col-sm-8">
	                <div class="input-group">
	                    <input id="groupId" name="groupId" type="hidden"   th:value="*{groupId}"  />
	                    <input class="form-control" type="text" onclick="selectGroupTree()" id="groupName" readonly="true"   th:value="*{groupName}">
	                    <span class="input-group-addon" onclick="selectGroupTree()"><i class="fa fa-search"></i>选择</span>
	                </div>
	            </div>
	        </div>
	        <div class="form-group">    
                <label class="col-sm-3 control-label">显示排序：</label>
                <div class="col-sm-8">
                    <input name="sort" class="form-control" type="number"  th:field="*{sort}">
                </div>
            </div>
	        <div class="form-group">
	            <label class="col-sm-3 control-label">素材大小：</label>
	            <div class="col-sm-8">
	                <input name="size" id="size" class="form-control"  type="hidden"  th:field="*{size}">
	                <input name="sizeDisplay" id="sizeDisplay" class="form-control" readonly type="text">
	            </div>
	        </div>
	        <div class="form-group">
	            <label class="col-sm-3 control-label">宽：</label>
	            <div class="col-sm-8">
	                <input name="width" id="width" class="form-control" readonly type="text"  th:field="*{width}">
	            </div>
	        </div>
	        <div class="form-group">
	            <label class="col-sm-3 control-label">高：</label>
	            <div class="col-sm-8">
	                <input name="height" id="height" class="form-control" readonly type="text"  th:field="*{height}">
	            </div>
	        </div>
	        <div class="form-group">
	            <label class="col-sm-3 control-label">保存路径：</label>
	            <div class="col-sm-8">
	                <input name="url" id="url" readonly class="form-control" type="text"  th:field="*{url}">
	            </div>
	        </div>
		</form>
	</div>
	<th:block th:include="include :: footer" />
	<th:block th:include="include :: bootstrap-fileinput-js" />
	<script type="text/javascript">
		var prefix = ctx + "shop/material";
	    //1图片2 视频3文本4音频5压缩6其它
	    var imageReg = /.+\.(gif|jpg|jpeg|png|webp|bmp)/i; //图片
	    var vedioReg = /.+\.(mpg?4|3gp|wav|wma|wmv)/i;   //视频
	    var textReg=/.+\.(txt|pdf|doc|docx|xls|xlsx|ppt|pptx|ini)/i; //文本
	    var audioReg = /.+\.(mp3|mid|wav|wma|avi)/i; //视频
	    var zipReg = /.+\.(zip|rar|gz|bz2|jar)/i;//压缩
	    //素材类型
	    var MATERIAL_TYPE_IMAGE="1"; //图片
	    var MATERIAL_TYPE_VIDEO="2"; //视频
	    var MATERIAL_TYPE_TXT="3"; //文本
	    var MATERIAL_TYPE_AUDIO="4"; //音频
	    var MATERIAL_TYPE_ZIP="5"; //压缩
	    var MATERIAL_TYPE_OTHER="6"; //其它
		
	    $(function(){
	        $("[name='materialTypeDisplay']").iCheck('disable');
	        var v=$("#size").val();
            $("#sizeDisplay").val(renderFileSize(v));

            var materialType=$("#materialType").val();
            $("[name='materialTypeDisplay'][value='"+materialType+"']").iCheck('check');
	    })
		
		function selectGroupTree() {
			var options = {
				title: '分组选择',
				width: "380",
				url:ctx + "shop/material/group/selectGroupTree/"+$("#groupId").val()+"/0",
				callBack: doSubmit
			};
			$.modal.openOptions(options);
		}
		function doSubmit(index, layero){
			var body = $.modal.getChildFrame(index);
   			$("#groupId").val(body.find('#treeId').val());
   			$("#groupName").val(body.find('#treeName').val());
   			$.modal.close(index);
		}
		
		$(".file-upload").fileinput({
            uploadUrl: prefix + '/uploadMaterial',
            maxFileCount: 1,
            showPreview: false,
            showCaption: false,
            showUpload:false,
            showRemove: false,
            autoReplace: true,
        //    browseIcon: '<i class="fa fa-search"></i>&nbsp;',
            browseClass: "btn btn-info btn-sm"
        }).on('fileuploaded', function (event, data, previewId, index) {
        	console.log(data.response);
            $("input[name='" + event.currentTarget.id + "']").val(data.response.url);
        	$("#url").val(data.response.url);
        	$("#width").val(data.response.width);
        	$("#height").val(data.response.height);
        	$("#materialName").val(data.response.originalFilename);
        	$("#extension").val(data.response.extension);
        	$("#size").val(data.response.size);
            $("#sizeDisplay").val(renderFileSize(data.response.size));
        	autoSetMaterialType(data.response.newFileName);
        }).on('filebatchselected', function (event, id, index) {//自动上传
        	$(this).fileinput("upload");
        }).on('fileremoved', function (event, id, index) {
            $("input[name='" + event.currentTarget.id + "']").val('');
            $("#materialName").val('');
        })
        
       //设置素材类型
       function autoSetMaterialType(name){
	        var v=MATERIAL_TYPE_OTHER;
	        if(imageReg.test(name)){
	            v=MATERIAL_TYPE_IMAGE;
	        }else if(vedioReg.test(name)){
	            v=MATERIAL_TYPE_VIDEO;
	        }else if(textReg.test(name)){
	            v=MATERIAL_TYPE_TXT;
	        }else if(audioReg.test(name)){
	            v=MATERIAL_TYPE_AUDIO;
	        }else if(zipReg.test(name)){
	            v=MATERIAL_TYPE_ZIP;
	        }else{
	            v=MATERIAL_TYPE_OTHER;
	        }
	        $("[name='materialType']").val(v);
	        $("[name='materialTypeDisplay'][value='"+v+"']").iCheck('check');
        }
        
        $("#form-material-edit").validate({
			onkeyup: false,
			rules:{
			},
		    focusCleanup: true
		});
		
		function submitHandler() {
	        if ($.validate.form()) {
                $.operate.save(prefix + "/edit", $('#form-material-edit').serialize());
            }
	    }
		
		 //  格式化文件大小
	    function renderFileSize(value){
		    if(null==value||value==''){
		        return "0 Bytes";
		    }
		    var unitArr = new Array("Bytes","KB","MB","GB","TB","PB","EB","ZB","YB");
		    var index=0,
		        srcsize = parseFloat(value);
		    index=Math.floor(Math.log(srcsize)/Math.log(1024));
		    var size =srcsize/Math.pow(1024,index);
		    //  保留的小数位数
		    size=size.toFixed(2);
		    return size+unitArr[index];
      	}
	</script>
</body>
</html>
